<template>
  <a-row type="flex">
    <a-col :span="6" class="list-menu">
      <a-list itemLayout="horizontal" :dataSource="data">
        <a-list-item
          @click="selectItem(item,index)"
          v-bind:class="{active: activeIndex == index }"
          class="item"
          slot="renderItem"
          slot-scope="item, index"
        >
          <a-list-item-meta
            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <a slot="title" href="https://vue.ant.design/">{{item.title}}</a>
            <a-avatar
              class="avatar"
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-col>
    <a-col :span="18">
      <template v-if="activeIndex == -1">
        <div class="empty">
          <img src="~/assets/hi.png" alt>
        </div>
      </template>
      <template v-if="activeIndex != -1">
        <chat-box></chat-box>
      </template>
    </a-col>
  </a-row>
</template>
<script>
import { List, Row } from "ant-design-vue";
import ChatBox from "./ChatBox";
const Item = List.Item;
const Meta = Item.Meta;
const data = [
  {
    title: "Ant Design Title 1"
  },
  {
    title: "Ant Design Title 2"
  },
  {
    title: "Ant Design Title 3"
  },
  {
    title: "Ant Design Title 4"
  }
];
export default {
  components: {
    List,
    Item,
    Meta,
    Row,
    ChatBox
  },
  data() {
    return {
      data,
      activeIndex: -1
    };
  },
  methods: {
    selectItem(item, index) {
      console.log(item, index);
      this.activeIndex = index;
    }
  }
};
</script>
<style>
.avatar {
  width: 60px;
  height: 60px;
}
.ant-col-6 {
  border-right: 1px solid #e8e8e8;
}
.item:hover {
  cursor: pointer;
}
.item.active {
  background: #f3f3f3;
}
.list-menu {
  min-height: 580px;
}
.empty {
  width: 100%;
  height: 100%;
  min-height: 580px;
  margin: auto;
  text-align: center;
}
.empty img {
  display: inline;
  text-align: center;
}
</style>